<template>
  <div>
    <!-- 顶部滑动条 -->
    <div id="slider" class="mui-slider">
      <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="mui-scroll">
          <!-- 列表标题, 使用三元表达式来初始化选中效果, 切换效果组件已经提供好了 -->
          <span v-for="item in categoryList"
                :key="item.id"
                :class="['mui-control-item', item.id === 0 ? 'mui-active' : '']"
                @click="getPhotoByCategory(item.id)">
            {{ item.title }}
          </span>
        </div>
      </div>
    </div>

    <!-- 图片内容 -->
    <ul class="lazyul">
      <router-link tag="li"
          v-for="item in photoList"
          :key="item.id"
          :to="'/home/photoInfo/' + item.id">
        <!-- 图片 -->
        <img v-lazy="item.img_url">
        <!-- 信息内容 -->
        <div class="content">
          <h3 class="content-title">{{ item.title }}</h3>
          <div class="content-info">{{ item.zhaiyao }}</div>
        </div>
      </router-link>
    </ul>

  </div>
</template>

<script>
/** 引入mui的js文件, 使得顶部滑动栏可以滑动 **/
import mui from '../../../lib/mui/js/mui.min.js'

export default {
  data(){
    return {
      categoryList: [],  // 图片分类数组
      photoList: [] // 图片数组
    }
  },
  created() { // 生命周期函数, 此时data和methods都已经加载完毕
    this.getPhotoCategory();
    this.getPhotoByCategory(0); // 获取`全部`栏的图片
  },
  mounted() { // 生命周期函数, 此时Vue实例初始化完成, DOM树也生成完毕
    mui('.mui-scroll-wrapper').scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  methods: {
    /** 请求获取图片分类的方法 **/
    async getPhotoCategory(){
      const { data } = await this.$http.get("/api/getimgcategory");
      if( data.status === 0 ) {
        /* 将数据放到数组中 */
        this.categoryList = data.message;
        /* 将`全部`放到数组最开头 */
        this.categoryList.unshift({title:"全部", id:0});
      }
    },
    /** 请求获取图片的方法 **/
    async getPhotoByCategory(id){
      const { data } = await this.$http.get("/api/getimages/" + id);
      if( data.status === 0 ) this.photoList = data.message;
    }
  }
}
</script>

<style lang="scss" scoped>
  /** 设置触屏用户如何操作元素的区域, pan-x标识横向滑屏, 提高流畅度 **/
  .mui-slider{
    touch-action: pan-x;
  }

  /** 设置图片懒加载 **/
  .lazyul{
    margin: 0;
    padding: 0px 10px;
    li{
      /* 让懒加载的图标居中 */
      text-align: center;
      background-color: #cccccc;
      position: relative;
      /* 选择器, 除了第一个以外, 其他都执行样式 */
      & + li{
        margin-top: 10px;
      }
      img{
        width: 100%;
        /* 修改图片底部3px的问题 */
        vertical-align: top;
      }
      img[lazy=loading]{
        width: 40px;
        height: 300px;
        margin: auto;
      }
      /* 内容部分 */
      .content{
        position: absolute;
        bottom: 0px;
        color: #ffffff;
        background-color: rgba(0, 0, 0, 0.5);
        /* 设置盒子最大高度, 超过部分隐藏 */
        max-height: 85px;
        overflow: hidden;
        .content-title{
          font-size: 14px;
        }
        .content-info{
          font-size: 13px;
          text-align: left;
          text-indent: 2em;
        }
      }
    }
  }
</style>